<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/harmonise.css" type="text/css" />
<link rel="stylesheet" href="../css/base-groups.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../css/ie.css" />
<![endif]-->
<title>Advanced Buttom | Chapter 5 | CSS Mastery </title>
</head>
<style type="text/css">

p {
	margin: 5em;
}


a {
 	font-size: 30px;
 	font-weight: 500;
}


/* Technique */

a.one {
	display: block;
	width: 6.6em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: 1px solid #66a300;
	background-color: #8cca12;
 	color: #fff;
}

a.one:hover {
	background-color: #f7a300;
	border-color: #ff7400;
}

a.one:active {
 	background-color: #a7a7a7;
	border-color: #868686;
}


a.two {
	display: block;
	width: 203px;
	height: 72px;
	text-indent: -1000em;
	background: url(img/button.png) left top no-repeat;
}

a.two:hover {
	background-image: url(img/button-over.png);
}

a.two:active {
	background-image: url(img/button-active.png);
}


a.three {
	display: block;
	width: 203px;
	height: 72px;
	text-indent: -1000em;
	background: url(img/buttons.png) -203px 0 no-repeat;
}

a.three:hover {
	background-position: right top;
}

a.three:active {
	background-position: left top;
}


	
a.four {
	display: block;
	width: 6.6em;
	height: 1.4em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	border: 1px solid #66a300;
	 -moz-border-radius: 6px;
 	-webkit-border-radius: 6px;
 	border-radius: 6px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#abe142), to(#67a400));
	background-color: #8cca12;
 	color: #fff;
 	text-shadow: 2px 2px 2px #66a300;
	-moz-box-shadow: 2px 2px 2px #ccc;
	-webkit-box-shadow: 2px 2px 2px #ccc;
	box-shadow: 2px 2px 2px #ccc;
	-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.52, transparent), to(white));
}

a.four:hover {
	background-color: #f7a300;
 	text-shadow: 2px 2px 2px #ff7400;
	border-color: #ff7400;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7a300), to(#ff7400));
}

a.four:active {
 	background-color: #a7a7a7;
 	text-shadow: 2px 2px 2px #868686;
	border-color: #868686;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a7a7a7), to(#868686));
}



</style>
</head>
<body>

<p>
<a href="#" class="one">Book Now &raquo;</a>
</p>

<p>
<a href="#" class="two">Book Now &raquo;</a>
</p>

<p>
<a href="#" class="three">Book Now &raquo;</a>
</p>

<p>
<a href="#" class="four">Book Now &raquo;</a>
</p>

</body>
</html>